import { Tag } from "antd-mobile"
import { FC } from "react"
import { useLocation,NavLink} from "react-router-dom"
import "@/styles/foot.scss"


export const Fonts = [
    { path:"/app/home", text:"首页", icon:"icon-home", },
    { path:"/app/find", text:"发现", icon:"icon-gengduo", },
    { path:"/app/news", text:"新闻", icon:"icon-zixun2", hot:true },
    { path:"/app/mine", text:"我的", icon:"icon-wode", },
]

const MyFoot:FC = () => {
    const { pathname } = useLocation()
  return (
    <footer className="footbox">
        {
            Fonts.map((item,index)=>{
                return(
                    <div key={index} >
                        <NavLink to={item.path}>
                            <i className={"iconfont " + item.icon}></i>
                            <span>{item.text}</span>
                            {
                                item.hot && <Tag className="hot" color={pathname=="/app/news"?'#ff5f16':'#999'}>{5}</Tag>
                            }
                        </NavLink>
                    </div>
                )
            })
        }
    </footer>
  )
}

export default MyFoot